<template>
  <div class="conditional-example">
    <h3>条件编译示例</h3>

    <!-- 中国地区专用内容 -->
    <!-- #ifdef cn -->
    <div class="region-specific cn-content">
      <h4>🏮 中国地区专用内容</h4>
      <p>这段内容只在中国地区显示</p>
    </div>
    <!-- #endif -->

    <!-- 日本地区专用内容 -->
    <!-- #ifdef jp -->
    <div class="region-specific jp-content">
      <h4>🌸 日本地区专用内容</h4>
      <p>この内容は日本地域でのみ表示されます</p>
    </div>
    <!-- #endif -->

    <!-- 美国地区专用内容 -->
    <!-- #ifdef us -->
    <div class="region-specific us-content">
      <h4>🇺🇸 美国地区专用内容</h4>
      <p>This content is only displayed in the US region</p>
    </div>
    <!-- #endif -->

    <!-- 多地区共享内容 -->
    <!-- #ifdef cn|jp -->
    <div class="shared-content">
      <h4>🌏 亚洲地区共享内容</h4>
      <p>这段内容在中国和日本地区都会显示</p>
    </div>
    <!-- #endif -->

    <div class="common-content">
      <h4>📱 通用内容</h4>
      <p>这段内容在所有地区都会显示</p>
      <button @click="showRegionMessage">显示地区特定消息</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const message = ref("");

const showRegionMessage = () => {
  // #ifdef cn
  message.value = "你好，中国用户！";
  console.log("CN: 中国地区专用逻辑执行");
  // #endif

  // #ifdef jp
  message.value = "こんにちは、日本のユーザー！";
  console.log("JP: 日本地区専用ロジック実行");
  // #endif

  // #ifdef us
  message.value = "Hello, US users!";
  console.log("US: US region specific logic executed");
  // #endif

  alert(message.value);
};

// 地区特定的配置
let regionConfig;

// #ifdef cn
regionConfig = {
  currency: "CNY",
  language: "zh-CN",
  timezone: "Asia/Shanghai",
};
// #endif

// #ifdef jp
regionConfig = {
  currency: "JPY",
  language: "ja-JP",
  timezone: "Asia/Tokyo",
};
// #endif

// #ifdef us
regionConfig = {
  currency: "USD",
  language: "en-US",
  timezone: "America/New_York",
};
// #endif

console.log("当前地区配置:", regionConfig);
</script>

<style scoped>
.conditional-example {
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 20px 0;
}

.region-specific {
  margin: 15px 0;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid;
}

.common-content,
.shared-content {
  margin: 15px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

/* 中国地区样式 */
/* #ifdef cn */
.cn-content {
  background: #fff2f0;
  border-left-color: #ff4d4f;
  color: #8c0009;
}
/* #endif */

/* 日本地区样式 */
/* #ifdef jp */
.jp-content {
  background: #fff0f6;
  border-left-color: #eb2f96;
  color: #9e1068;
}
/* #endif */

/* 美国地区样式 */
/* #ifdef us */
.us-content {
  background: #f6ffed;
  border-left-color: #52c41a;
  color: #135200;
}
/* #endif */

/* 共享样式 */
/* #ifdef cn|jp */
.shared-content {
  background: linear-gradient(135deg, #fff2f0, #fff0f6);
  border: 1px solid #d48806;
}
/* #endif */

button {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  background: #40a9ff;
}
</style>
